<template>
  <BaseLayoutTree treeTitle="组织机构" title="流程设计管理" @query="init" @reset="reset">
    <template #tree>
      <OrgTree @nodeClick="nodeClickHandler"></OrgTree>
    </template>
    <template #query>
      <el-form :inline="true" :model="queryForm">
        <el-form-item label="设计名称">
          <el-input clearable v-model="queryForm.designName" placeholder="请输入设计名称"/>
        </el-form-item>
        <el-form-item label="分组编号">
          <el-input clearable v-model="queryForm.groupCode" placeholder="请输入分组编号"/>
        </el-form-item>
      </el-form>
    </template>
    <template #button>
      <el-button type="primary" @click="addFlowDesign">新增</el-button>
    </template>
    <template #table>
      <el-table v-loading="loading" :data="data" height="100%" class="w-full">
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column prop="designName" label="设计名称" align="center" header-align="center"></el-table-column>
        <el-table-column prop="groupName" label="分组编号" align="center" header-align="center"></el-table-column>
        <el-table-column prop="designVersion" label="设计版本" align="center" header-align="center"></el-table-column>
        <el-table-column prop="createDate" label="创建时间" align="center" header-align="center"></el-table-column>
        <el-table-column prop="createUserName" label="创建用户" align="center" header-align="center"></el-table-column>
        <el-table-column header-align="center" align="center" prop="enabled" label="是否启用" width="80">
          <template #default="scope">
            <BaseTag :value="scope.row.enabled" :dict="enableOptions"></BaseTag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center" header-align="center">
          <template #default="scope">
            <el-button link type="primary" @click="design(scope.row.designId)">设计</el-button>
            <el-button link type="primary" @click="editFlowDesign(scope.row.designId)">修改</el-button>
            <el-button link type="danger" @click="delFlowDesign(scope.row.designId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <AddOrUpdateFlowDesign @load="init" ref="addOrUpdateFlowDesignRef"></AddOrUpdateFlowDesign>
      <DesignFlow ref="designRef"></DesignFlow>
    </template>
    <template #page>
      <BasePage @load="init" v-model:current="queryForm.current" v-model:size="queryForm.size"
                :total="queryForm.total"></BasePage>
    </template>
  </BaseLayoutTree>
</template>

<script setup lang="ts">
import AddOrUpdateFlowDesign from './AddOrUpdateFlowDesign.vue'
import DesignFlow from './DesignFlow.vue'
import {nextTick, onMounted, reactive, ref} from "vue";
import {deleteFlowDesignByDesignId, listFlowDesignPage, selectFlowDesignByDesignId} from "/@/api/flow/FlowDesignApi";
import {messageBox} from "/@/utils/BjxUtils";
import {DictDataModel} from "/@/api/system/model/DictModel";
import {FlowDesignQueryModel, FlowDesignModel} from "/@/api/flow/model/FlowDesignModel";
import {ElMessage} from "element-plus";
import {useDictStore} from "/@/store/modules/dict";

const designRef = ref()
const enableOptions = ref<DictDataModel[]>([])
const data = ref<FlowDesignModel[]>([])
const addOrUpdateFlowDesignRef = ref()
const loading = ref(false)
const queryForm = reactive<FlowDesignQueryModel>({
  designName: '',
  orgId: '',
  groupCode: '',
  size: 10,
  current: 1,
  total: 0
})
const init = async () => {
  loading.value = true
  let res = await listFlowDesignPage({...queryForm}, () => {
    loading.value = false
  })
  data.value = res.records
  queryForm.size = res.size
  queryForm.current = res.current
  queryForm.total = res.total
}
/**
 * 新增流程设计
 */
const addFlowDesign = () => {
  addOrUpdateFlowDesignRef.value.init("新增流程设计", {orgId: queryForm.orgId})
}
/**
 * 修改流程设计
 */
const editFlowDesign = async (designId: string) => {
  loading.value = true
  let res = await selectFlowDesignByDesignId(designId)
  addOrUpdateFlowDesignRef.value.init("修改流程设计", res)
  loading.value = false
}
/**
 * 删除流程设计
 */
const delFlowDesign = async (designId: string) => {
  messageBox("您确定要删除这个流程设计吗?", async () => {
    loading.value = true
    await deleteFlowDesignByDesignId(designId, () => {
      loading.value = false
    })
    init()
  })

}
/**
 * 组织机构树点击事件
 * @param orgId
 */
const nodeClickHandler = (orgId: string) => {
  queryForm.orgId = orgId
  init()
}
/**
 * 设计
 */
const design = async (designId: string) => {
  loading.value = true
  let res = await selectFlowDesignByDesignId(designId)
  designRef.value.init(res.designContent,res.designId,res.definitionKey,res.designName)
  loading.value = false
}
/**
 * 重置
 */
const reset = () => {
  queryForm.designName = '',
      queryForm.orgId = '',
      queryForm.groupCode = '',
      queryForm.current = 1
  init()
}

onMounted(async () => {
  let dictStore = useDictStore();
  enableOptions.value = await dictStore.getDict('enable_dict')
  nextTick(() => {
    init()
  })

})
</script>

<style scoped>

</style>